<template>
  <div>
    <div class="chart-name-select">
      <!-- uesrtype<4 -->
      <el-radio
        class="radio-box"
        v-model="type"
        :label="item.label"
        size="mini"
        v-for="(item, index) in tabList"
        :key="index"
        @change="handleChange(item.label)"
      >
        <img :src="item.imgSrc" alt />
        {{ item.text }}
      </el-radio>
    </div>

    <!-- 图表 -->
    <div class="analysis-box">
      <data-analysis-echarts
        v-if="echartsData && echartsData.length"
        ref="dataCharts"
        :type="type"
        :chartsData="echartsData"
      ></data-analysis-echarts>
      <div v-else style="text-align: center;">
        <span class="el-table__empty-text">暂无数据</span>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, createNamespacedHelpers } from 'vuex'
const {
  mapState: mapStateForm,
  mapMutations: mapMutationsForm
} = createNamespacedHelpers('gisForm')
import { getUserTrendList } from '@/apis/gis'
import DataAnalysisEcharts from './chart'
export default {
  name: 'DataAnalysisLine',
  components: { DataAnalysisEcharts },

  data() {
    return {
      // 详情tab列表
      tabList: [
        { label: 12, text: '漫入用户' },
        { label: 15, text: '总用户' },
        { label: 14, text: '5G用户' }
      ],
      type: 12,
      echartsData: []
    }
  },
  created() {
    window.console.log(3344)
    // this.queryChart()
  },
  mounted() {
    this.queryChart()
  },
  computed: {
    ...mapState(['home', 'gisForm']),
    ...mapStateForm(['indicatorType'])
  },
  watch: {
    indicatorType(nv) {
      this.queryChart()
    }
  },
  methods: {
    queryChart() {
      const townId = this.gisForm.indicatorType
      const cityId = this.home.userInfoVo.cityId
      getUserTrendList({ cityId, townId, type: this.type }).then(data => {
        if (data.code == 1) {
          this.echartsData = data.data
        }
      })
    },
    handleChange(value) {
      this.type = value
      this.queryChart()
    }
  }
}
</script>

<style scoped>
.chart-name-select {
  height: 26px;
  background: #edecf1;
}
.chart-name-select .radio-box {
  height: 100%;
  line-height: 1.5;
}
.analysis-box {
  min-height: 40px;
  overflow: auto;
  margin-top: 10px;
}

.chart-net-select {
  height: 20px;
}
</style>
